<script setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import router from '@/router';
    import { loginAPI, registerAPI } from '@/api/login'
    import { useUserStore } from '@/stores/user'

    const userStore = useUserStore()

    const isLogin = ref(true)
    const formData = ref({
        username: '',
        password: '',
    })

    function switchState() {
        formData.value.username = ''
        formData.value.password = ''
        isLogin.value = !isLogin.value
    }

    function validate() {
        const regex = /^[\w]{1,15}$/
        const { username, password } = formData.value

        if (!regex.test(username)) {
            ElMessage.error("用户名只能包含字母、数字和下划线，且在5-15个字符之内")
            return false
        }
        if (!regex.test(password)) {
            ElMessage.error("密码只能包含字母、数字和下划线，且在5-15个字符之内")
            return false
        }
        return true
    }
    async function login() {
        if (!validate()) {
            return;
        }
        try {
            const res = await loginAPI({
                username: formData.value.username,
                password: formData.value.password
            });
            ElMessage.success('登录成功');
            userStore.Login({ username: formData.value.username, password: formData.value.password })
            router.replace('/home')
        } catch (error) {
            // 处理登录失败的逻辑，例如显示错误信息
            ElMessage.error('登录失败，请检查用户名和密码');
            formData.value.password = '';
        }

    }
    async function register() {
        if (!validate()) {
            return;
        }
        try {
            const res = await registerAPI({
                username: formData.value.username,
                password: formData.value.password
            })
            ElMessage.success('注册成功');
            switchState()
        } catch (error) {
            ElMessage.error('注册失败，请检查用户名和密码');
            console.error('登录失败:', error);
        }

    }
</script>

<template>
    <div class="container">
        <div class="login-container" v-show="isLogin">
            <h2>登录</h2>
            <input type="text" placeholder="用户名" v-model="formData.username">
            <input type="password" placeholder="密码" v-model="formData.password">
            <button v-on:click="login">登录</button>
            <div class="switch">
                <span v-on:click="switchState">没有账号？注册</span>
            </div>
        </div>
        <div class="register-container" v-show="!isLogin">
            <h2>注册</h2>
            <input type="text" placeholder="用户名" v-model="formData.username">
            <input type="password" placeholder="密码" v-model="formData.password">
            <button type="submit" v-on:click="register">注册</button>
            <div class="switch">
                <span v-on:click="switchState">已有账号？登录</span>
            </div>

        </div>
    </div>


</template>

<style scoped>
    html {
        background-size: cover;
        background-image: url(../src/assert/code_coverage_login_bg_v2.png);
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 240px;
        width: 300px;
        padding: 15px;
        margin: 160px auto auto auto;


        background-color: rgba(219, 223, 212, 0.5);
        border-radius: 10px;
        box-shadow: 0 0 15px rgb(0, 0, 0);

        .login-container,
        .register-container {

            /* title */
            h2 {
                /* font-size: 1em; */

                text-align: center;
            }

            /* input */
            input {
                width: 100%;
                margin-top: 10px;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            /* button */
            button {
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                background-color: #007BFF;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            button:hover {
                background-color: #0056b3;
            }

            /* switch-text */
            .switch {
                margin-top: 10px;
                text-align: center;
            }

            .switch:hover {
                cursor: pointer;
                text-decoration: underline;
            }
        }

    }


</style>